@extends("admin.layout.main")

@section("content")
    <div id="app">

        <Row type="flex"  align="middle">
            <Spin size="large" fix v-if="spinShow"></Spin>
            <i-col span="35" style="margin: 20px ;">



                <span>
                    &nbsp&nbsp&nbsp开始时间:
                     <date-picker type="datetime"
                                  format="yyyy-MM-dd HH:mm:ss"
                                  :value="defaultStartTime"
                                  placeholder="选择开始日期" style="width: 200px"
                    @on-change="dateStartFormat">
                    </date-picker>
                </span>
                <span>
                    &nbsp&nbsp&nbsp结束时间:
                     <date-picker type="datetime"
                                  format="yyyy-MM-dd HH:mm:ss"
                                  :value="defaultEndTime"
                                  placeholder="选择结束时间" style="width: 200px"
                    @on-change="dateEndFormat">
                    </date-picker>
                </span>


                <span>
                    订单号:
                     <i-input v-model="order_id" style="width:200px"></i-input>
                </span>

                <span>
                    电话:
                     <i-input v-model="phone" style="width:200px"></i-input>
                </span>

                <span style="padding-left: 10px">
                      <i-button type="primary" @click="orderList">查询</i-button>
                </span>

                <span style="width: 100px;display: inline-block">
                     <Upload action="/admin/order/wechat/import" :data="data"  :on-success="onSucc"  :show-upload-list="showUpList">
                        <i-button icon="ios-cloud-upload-outline">导入订单</i-button>
                    </Upload>
                </span>

                <span style="padding-left: 10px">
                      <a href="/demo/微信订单.xlsx" >导入模板</a>
                </span>

            </i-col>
            <i-col span="35" style="width: 70% ;margin:20px 0 0 30px">
                <Card>
                    <span  style="display:inline-block;width: 140px">总成本：@{{ total_cost_price }}</span>
                    <span  style="display:inline-block;width: 140px">总支出：@{{ total_expend }}</span>
                    <span  style="display:inline-block;width: 140px">总价：@{{ total_price }}</span>
                </Card>
            </i-col>



        </Row>
        <Row type="flex" justify="center" align="middle">
            <i-col span="23" style="margin-top: 20px">
                <i-table ref="selection" :data="tableData" :columns="tableColumns" stripe
                         style="width: 100% !important;">
                </i-table>
            </i-col>
        </Row>

        <Row type="flex" justify="center" class="code-row-bg">
            <i-col>
                <Page
                        size="small"
                        :total="page.total"
                        :current="page.current"
                        :page-size="page.pageSize"
                        show-total
                        show-elevator
                        @on-change="orderList">

                </Page>
            </i-col>
        </Row>

    </div>
    <script src="/js/layer/layer.js"></script>
    <script src="/js/vue.js"></script>
    <script  src="/js/iview.js"></script>
    <script  src="/js/axios.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    data:{
                        token : '',
                    },
                    token:'',
                    tableData: [],
                    tableColumns: [
                        {
                            title: '订单号',
                            width: '200',
                            key:'order_id'
                        },
                        {
                            title: '主播',
                            key: 'liver',
                        },
                        {
                            title:'顾客',
                            key:'customer',
                        },
                        {
                            title: '电话',
                            key:'phone',
                        },
                        {
                            title: '厂家',
                            key:'manu_name',
                        },
                        {
                            title: '商品',
                            key:'product_name',
                        },
                        {
                            title: '支付类型',
                            key:'pay_type',
                        },
                        {
                            title: '摘要',
                            key:'summary',
                        },
                        {
                            title: '收入',
                            key:'price',
                        },
                        {
                            title: '成本',
                            key:'cost_price',
                        },


                        {
                            title: '其他支出',
                            key:'expend',
                        },
                        {
                            title: '余额',
                            key:'surplus',
                        },
                        {
                            title: '备注',
                            key:'remark',
                        },
                        {
                            title: '客服',
                            key:'customer_service',
                        },
                        {
                            title: '时间',
                            key:'create_time',
                        }

                    ],
                    spinShow:false,
                    order_id:'',
                    page: {
                        total: 0,
                        current: 1,
                        pageSize: 50,
                    },
                    defaultStartTime:'',
                    defaultEndTime:'',
                    total_cost_price:'',
                    total_expend:'',
                    total_price:'',
                    phone:'',
                    showUpList:false,
                }
            },
            mounted(){
                this.token = window.localStorage.getItem('current_user');
                this.data.token = this.token;
                this.$Message.config({
                    top: 90,
                    duration: 3
                });
            },
            methods: {
                onSucc(response){
                    if(response.code == 200){
                        this.$Message.info('上传成功');
                    }else{
                        this.$Message.info(response.msg);
                        return;
                    }


                },
                searchList(){   //搜索
                    this.orderList(1);
                },
                toThousand(num){
                    var result = '', counter = 0;
                    var dot = String(num).indexOf(".");
                    if(dot != -1){

                        var dotCnt = String(num).substring(dot+1,num.length);

                        // 获取小数点前面的数字
                        num = String(num).split('.')[0]
                        num = (num || 0).toString();
                        for (var i = num.length - 1; i >= 0; i--) {
                            counter++;
                            result = num.charAt(i) + result;
                            if (!(counter % 3) && i != 0) { result = ',' + result; }
                        }
                        result = result + '.' + dotCnt;
                        return result;

                    }else{
                        // alert("没有小数点");
                        return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
                    }

                },
                dateStartFormat(f,v){
                    this.defaultStartTime = f;
                },
                dateEndFormat(f,v){
                    this.defaultEndTime = f;
                },
                //获取几天前时间日期
                getValidDate(dayCount = 1){
                    curDate = new Date();
                    var preDate = new Date(curDate.getTime() - dayCount*24*60*60*1000);
                    var year = preDate.getFullYear();
                    var month = preDate.getMonth()+1;
                    if(month < 10){
                        month = '0'+ month;
                    }
                    var day = preDate.getDate();
                    if(day < 10){
                        day = '0'+ day;
                    }
                    var time = year + '-' + month + '-' + day;
                    return time;
                },
                getHourDate(hourCount){  //  前几个小时的时间
                    let curDate = new Date();
                    let preDate = new Date(curDate.getTime());
                    h = preDate.getHours()-hourCount;// 小时
                    m = preDate.getMinutes(); // 分
                    s = preDate.getSeconds(); // 秒

                    if(h < 10){
                        h = '0'+h;
                    }
                    if(m < 10){
                        m = '0'+m;
                    }
                    if(s < 10){
                        s = '0'+s;
                    }

                    let time = this.getValidDate(0)+' '+h+':'+m+':'+s;
                    return time;

                },
                orderList(page = 1) {
                    let that = this;
                    this.spinShow = true;
                    axios.get("/admin/order/wechat/list",{
                        params: {
                            token:vm.token,
                            start_time: that.defaultStartTime,
                            end_time: that.defaultEndTime,
                            order_id:that.order_id,
                            page:page,
                            phone:that.phone,
                        }
                    })
                    .then(function (response) {
                        vm.tableData = response.data.result.list.data;
                        vm.page.total = response.data.result.list.total;
                        vm.page.current = response.data.result.list.current_page;
                        vm.page.pageSize = response.data.result.list.per_page;
                        vm.total_price  =   response.data.result.data.total_price;
                        vm.total_cost_price  =   response.data.result.data.total_cost_price;
                        vm.total_expend  =   response.data.result.data.total_expend;
                        that.spinShow = false;
                    });
                },
                batch() {
                    let ids = [];
                    this.$refs.selection.getSelection().map(item => {
                        ids.push(item.order_id);
                    });
                    return ids;
                },

            },

        });

        vm.token = getToken();
        vm.orderList(1);

        $("body").addClass("sidebar-collapse");

    </script>

@endsection

